
//从仓库获取用户名，密码
$(function(){
    users=JSON.parse(localStorage.getItem("users"));
        var tbody=$("tbody");
        // var num=$("tbody tr").length+1;
        var usernameView=localStorage.getItem("username");//登录的用户的用户名
        var passwordView=localStorage.getItem("password");//登录的用户的密码
        var usernames=[];
        for(var i=0;i<users.length;i++){
            usernames.push(users[i].username);
        }
        var index=usernames.indexOf(usernameView);
        // console.log(index);
        var num=users[index].id;
         phone=users[index].phone;//找到对应的手机号
        var tr=$("<tr><td>"+num+"</td><td>"+usernameView+"</td><td>"+passwordView+"</td><td>"+phone+"</td><td><div id='layerDemo'><input type='button' value='修改' data-method='offset' data-type='auto' class='layui-btn layui-btn-normal layui-btn-sm' onclick='doChange(this)'></div></td></tr>")
        tbody.append(tr);
        // console.log(usernameView);
        // console.log(passwordView);
        $("a:eq(0)").html(usernameView);//右上角显示登录的用户名
});


//修改的弹出层
// $(function(){
    var _this;
function doChange(obj){
    _this=obj;
    layui.use('layer', function(){
        var users=JSON.parse(localStorage.getItem("users"));
        var usernameView=localStorage.getItem("username");//登录的普通用户的用户名
        var passwordView=localStorage.getItem("password");//登录的普通用户的密码
        var usernames=[];
        for(var i=0;i<users.length;i++){
            usernames.push(users[i].username);
        }
        console.log(usernames);
         index=usernames.indexOf(usernameView);//通过名字找索引，根据索引找对应的密码等
        var layer = layui.layer;
        var text="<table width='300px' height='130px' style='margin-left:30px'><tr><td>用户名</td><td><input type='text' value='"+users[index].username+"' style='width:180px;height:25px' disabled></td></tr>"+
            "<tr><td>密码</td><td><input type='password' value='"+users[index].password+"' style='width:180px;height:25px'></td></tr>"+
            "<tr><td>手机号</td><td><input type='text' value='"+users[index].phone+"' style='width:180px;height:25px'></td></tr></table>";
        layer.open({
            type: 1, 
            content: 
            '<div style="padding-top:10px;padding-left:10px;width:300px;height:100px;">'+ text +'</div>',
             //这里content是一个普通的String
            area: ['500px', '300px'],
            btn: ['修改','关闭'],
            yes: function(index1, layero){
                //   console.log(layero);
                  var trs=$(layero).find("tr");//找到弹出层中的表格中的每一行
                  var inputs=trs.find("input:last-child");//找到弹出层中的输入框
                  var tr=$(_this).parents("tr");
                  var tds=tr.children();
                  console.log(tds);
                  //将数据修改后存回表格
                  tds[1].innerHTML=inputs[0].value;
                  tds[2].innerHTML=inputs[1].value;
                  tds[3].innerHTML=inputs[2].value;

                  var users=JSON.parse(localStorage.getItem("users"));
                //   var userNew={
                //       "id":tds[0].innerHTML,
                //       "username":inputs[0].value,
                //       "password":inputs[1].value,
                //       "phone":inputs[2].value
                //   }
                //修改仓库中的数据
                // console.log("用户名数组:"+usernames);
                // console.log("修改的用户名的索引："+index);
                //将这个普通用户的数据重新赋值
                users[index]={"id":tds[0].innerHTML*1,"username":inputs[0].value,"password":inputs[1].value, "phone":inputs[2].value};
                localStorage.setItem("users",JSON.stringify(users));
                layer.closeAll();
            },
            btn2: function(index, layero){
                //按钮【按钮二】的回调
                // console.log(2);
                // return false;
            },
            cancel: function(){ 
                //右上角关闭回调
                // console.log(4)
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    });
}


//向表中添加行
// $(function(){
//     $("input:eq(1)").click(function(){
//         var username;
//         var password;
//         var phone;
//         var num=$("tbody tr").length+1;
//         var arrs=[num,username,password,phone,"<input type='button' value='修改' class='layui-btn layui-btn-normal layui-btn-sm' data-toggle='modal' data-target='#myModal' onclick='doChange(this)'> <input class='layui-btn layui-btn-sm layui-btn-danger deleteBtn' style='outline: none;' type='button' value='删除' onclick='doRemove(this)'>"];
//          var tr=$("<tr></tr>");
//          for(var i=0;i<5;i++){
//                 var td=$("<td>"+arrs[i]+"</td>");
//                 tr.append(td);
//          }
//          $("tbody").append(tr);
//     });
// });

// //删除行
// function doRemove(obj){
//     var tds=$(obj).parents("tr").children("td");//找到点击删除行的每个td格子
//     if(tds[0].innerHTML==1){//如果序号为1，不让删
//         alert("不能删除管理员");
//     }else{
//         $(obj).parents("tr").remove();//祖先元素中的tr,删除
//         var thNum=$("tbody tr").find("td:first");
//         $.each(thNum,function(index,item){
//             item.innerHTML=index+1;
//         });
//     }
// }
//全部删除
// function doDeleteAll(){
//     $("tbody tr").slice(1,$("tbody tr").length).remove();//除了第一行不删
// }

//修改
// var _this;
// function doChange(obj){
//     _this=obj;//将当前点击的修改按钮的DOM对象放在一个全局变量中
//     // console.log(obj);
//     // console.log($(obj).parents("tr"));
//     var tr=$(obj).parents("tr");
//     // console.log(tr.children());
//     var td=tr.children();
//     // console.log(td[0].innerHTML);
//     var modalInputs=$(".modal-body input");
//     // console.log(modalInputs);
//     for(var i=0;i<4;i++){
//         modalInputs[i].value=td[i].innerHTML;//将找到的数据放入输入框中
//     }
// }